<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="fonts/font_icon/iconfont.css" />
		<style type="text/css">
			.bg-circular {
				margin: 10px auto;
				color: #FFFffF;
				width: 150px;
				height: 150px;
				border-radius: 50%;
				line-height: 150px;
				display: block;
				overflow: hidden;
			}
			
			.tab-li {
				width: 100%;
				height: 95px;
				float: left;
				display: block;
				overflow: hidden;
			}
			
			.tab-list {
				width: 50%;
				display: block;
				overflow: hidden;
			}
			
			.tab-list div:first-child {
				font-size: 24px;
				padding-bottom: 10px;
				width: 100%;
				display: block;
				overflow: hidden;
			}
			
			.tab-li div:first-child {
				font-size: 24px;
				padding-bottom: 10px;
				width: 100%;
				display: block;
				overflow: hidden;
			}
			
			.tab-li div {
				font-size: 18px;
				width: 100%;
				height: 50%;
				display: block;
				overflow: hidden;
			}
			
			.bg {
				position: fixed;
				width: 100%;
				height: 100%;
				background: rgba(45, 45, 45, 0.6);
				top: 0;
				left: 0;
				z-index: 20;
				display: none;
			}
			
			#planeType {
				position: fixed;
				width: 100%;
				padding: 10px;
				background: #FFFFFF;
				top: 0px;
				left: 0;
				z-index: 21;
				display: none;
			}
			
			#planeType .typeLi {
				text-align: center;
				padding: 10px;
			}
			
			.header-bg {
				z-index: 22;
			}
			
			.mui-content .mui-icon img {}
			
			.kaoshijieshao {
				background: #e8fbdf;
				display: block;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				padding: 5px 0;
				position: relative;
				color: #00c303;
			}
			
			.kaoshijieshao:after {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 31px solid #e8fbdf;
				content: '';
				right: -10px;
				top: 0;
			}
			
			.timushuliang {
				background: #daf8fa;
				display: block;
				position: relative;
				padding: 5px 0;
				color: #06cdb9;
			}
			
			.timushuliang:after {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 31px solid #daf8fa;
				content: '';
				right: -10px;
				top: 0;
			}
			
			.timushuliang:before {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 31px solid #daf8fa;
				content: '';
				left: -10px;
				top: 0;
			}
			
			.kaodianjieshao {
				background: #ffeeea;
				display: block;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				position: relative;
				padding: 5px 0;
				color: #f15a16;
			}
			
			.kaodianjieshao:after {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 31px solid #ffeeea;
				content: '';
				left: -10px;
				top: 0;
			}
			
			#index,
			#mylist {
				display: table-cell;
				overflow: hidden;
				width: 1%;
				height: 50px;
				text-align: center;
				vertical-align: middle;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			#index .mui-icon,
			#mylist .mui-icon {
				top: 3px;
				width: 24px;
				height: 24px;
				padding-top: 0;
				padding-bottom: 0;
			}
			
			#index .mui-icon~.mui-tab-label,
			#mylist .mui-icon~.mui-tab-label {
				font-size: 11px;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-table-view mui-table-view-chevron" style="background: #EFEFF4;">
					<div class="mui-row bg_white">
						<div class="mui-col-xs-4 mui-text-center mui-content-padding">
							<span class="kaoshijieshao">考试介绍</span>
						</div>
						<div class="mui-col-xs-4 mui-text-center mui-content-padding">
							<span class="timushuliang">题目数量</span>
						</div>
						<div class="mui-col-xs-4 mui-text-center mui-content-padding">
							<span class="kaodianjieshao">考点介绍</span>
						</div>
					</div>
					<!-- 主界面具体展示内容 -->
					<div class="mui-row" style="padding-top: 15px; margin-top:10px;background-color: #FFF;">
						<div class="mui-col-xs-3 mui-col-sm-3">
							<div class="tab-li mui-text-center practise">
								<div class="mui-icon iconfont"><img src="img/zhangjielianxi.JPG" style="width: 40%;" /></div>
								<div class="mui-tab-label">章节练习</div>
							</div>
							<div class="tab-li mui-text-center test">
								<div class="mui-icon iconfont"><img src="img/zhangjieceshi.JPG" style="width: 50%;" /></div>
								<div class="mui-tab-label">章节测试</div>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-6 mui-text-center bg-circular-p" id="info">
							<div class="mui-text-center">
								<img src="img/monikaoshi.JPG" style="width: 100%;" />
							</div>
						</div>
						<div class="mui-col-xs-3 mui-col-sm-3">
							<div class="tab-li mui-text-center studynew">
								<div class="mui-icon iconfont"><img src="img/xuexixinti.JPG" style="width: 40%;" /></div>
								<div class="mui-tab-label">学习新题</div>
							</div>
							<div class="tab-li mui-text-center error">
								<div class="mui-icon iconfont"><img src="img/fuxicuoti.JPG" style="width: 40%;" /></div>
								<div class="mui-tab-label">复习错题</div>
							</div>

						</div>
					</div>
					<div class="mui-row" style="margin-top: 8px;padding-bottom:26px;background-color: #FFFFFF;">
						<div class="mui-col-xs-6 mui-col-sm-6 tab-list mui-text-center collect" style="padding-top: 18px;">
							<div class="mui-icon iconfont"><img src="img/fuxishoucang.JPG" style="width: 23%;" /></div>
							<div class="mui-tab-label">复习收藏</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-6 tab-list mui-text-center review" style="padding-top: 18px;">
							<div class="mui-icon iconfont"><img src="img/fuxibuquedingtimu.JPG" style="width: 22%;" /></div>
							<div class="mui-tab-label">复习不确定题目</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-6 tab-list mui-text-center settime" style="padding-top: 18px;">
							<div class="mui-icon iconfont"><img src="img/kaoshidaojishi.JPG" style="width: 23%;" /></div>
							<div class="mui-tab-label">考试倒计时</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-6 tab-list mui-text-center mark" style="padding-top: 18px;">
							<div class="mui-icon iconfont"><img src="img/chengjibaogao.JPG" style="width: 28%;" /></div>
							<div class="mui-tab-label">成绩报告</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/zepot.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: "#pullrefresh", // 下拉刷新容器标识
					down: {
						top: '45px',
						height: 50,
						contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						contentrefresh: "已更新最新题库...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback: pullfreshFunction // 必选，刷新函数
					}
				}

			});

			function pullfreshFunction() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().refresh(true);
				}, 500);
			}
			mui.plusReady(function() {
				mui('.mui-bar-tab').on('tap', '#mylist', function() {
					console.log('my');
					mui.openWindow({
						url: 'my.html',
						id: 'mylist'
					});
				})
				mui('.mui-row').on('tap', '.kaoshijieshao', function() {
					mui.openWindow({
						url: 'kaoshijieshao.html',
					});
				});
				mui('.mui-row').on('tap', '.kaodianjieshao', function() {
					mui.openWindow({
						url: 'kechengjieshao.html',
					});
				});
				mui('.mui-col-xs-3').on('tap', '.practise', function() {
					mui.openWindow({
						url: 'info_tab3.html',
					});
				});
				mui('.mui-col-xs-3').on('tap', '.studynew', function() {
					var headertop = $(".studynew .mui-tab-label").text();
//					console.log(headertop);
					mui.openWindow({
						url: 'info_tab2.html',
						extras: {
							name: headertop
						}
					});
				});
				mui('.mui-col-xs-3').on('tap', '.error', function() {
					var headertop = $(".error .mui-tab-label").text();
//					console.log(headertop);
					mui.openWindow({
						url: 'info_tab2.html',
						extras: {
							name: headertop
						}
					});
				});
				mui('.mui-row').on('tap', '.collect', function() {
					var headertop = $(".collect .mui-tab-label").text();
//					console.log(headertop);
					mui.openWindow({
						url: 'info_tab2.html',
						extras: {
							name: headertop
						}
					});
				});
				mui('.mui-row').on('tap', '.review', function() {
					var headertop = $(".review .mui-tab-label").text();
//					console.log(headertop);
					mui.openWindow({
						url: 'info_tab2.html',
						extras: {
							name: headertop
						}
					});
				});
				mui('.mui-row').on('tap', '.mark', function() {
					mui.openWindow({
						url: 'submit.html',
					});
				});
				mui('.mui-row').on('tap', '.settime', function() {
					mui.openWindow({
						url: 'settime.html',
					});
				});
				mui('.mui-col-xs-3').on('tap', '.test', function() {
					mui.openWindow({
						url: 'info_tab.html',
					});
				});
				mui('.mui-row').on('tap', '#info', function() {
					mui.openWindow({
						url: 'info_text.html',
						id: 'info'
					});
				});
			})
		</script>
	</body>

</html>